<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
  <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
  <link th:href="@{/css/common.css}" rel="stylesheet"/>
</head>
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <div class="layui-form" lay-filter="searchForm">
        <div class="layui-form-item layui-form-pane">
          <label class="layui-form-label" for="username">姓名</label>
          <div class="layui-input-inline">
            <input class="layui-input" id="username" name="username" autocomplete="off"
                   placeholder="请输入姓名">
          </div>
          <label class="layui-form-label" for="type">学院</label>
          <div class="layui-input-inline">
            <input class="layui-input" id="college" name="college" autocomplete="off"
                   placeholder="请输入学院">
          </div>
          <label class="layui-form-label" for="major">专业</label>
          <div class="layui-input-inline">
            <input class="layui-input" id="major" name="major" autocomplete="off"
                   placeholder="请输入专业">
          </div>
        </div>
        <div class="layui-form-item layui-form-pane">
          <label class="layui-form-label" for="grade">年级</label>
          <div class="layui-input-inline">
            <input class="layui-input" id="grade" name="grade" autocomplete="off"
                   placeholder="请输入年级">
          </div>
          <label class="layui-form-label" for="classNo">班级</label>
          <div class="layui-input-inline">
            <input class="layui-input" id="classNo" name="classNo" autocomplete="off"
                   placeholder="请输入班级">
          </div>
          <label class="layui-form-label" for="type">贫困类型</label>
          <div class="layui-input-inline">
            <select id="type" name="type">
              <option value="">请选择类型</option>
              <option value="1">因病致贫</option>
              <option value="2">因灾致贫</option>
              <option value="3">低保</option>
              <option value="4">农村低收入子女</option>
              <option value="5">特困子女</option>
              <option value="6">烈士子女</option>
              <option value="7">少数民族家庭经济困难子女</option>
            </select>
          </div>
          <div class="layui-input-inline">
            <button class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-filter="searchBtn"
                    id="searchBtn">
              <i class="layui-icon layui-icon-search"></i>查询
            </button>
            <button class="layui-btn layui-btn-radius layui-btn-primary" lay-submit lay-filter="resetBtn">
              <i class="layui-icon layui-icon-refresh"></i>重置
            </button>
          </div>
        </div>
      </div>
      <table class="layui-table" id="dataTable" lay-filter="dataTable"></table>
    </div>
  </div>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
  layui.use(["table", "form","upload"], () => {
    const table = layui.table, form = layui.form, $ = layui.$;

    const cols = [[
      {type: "numbers"},
      {title: "姓名", field: "username",align: 'center'},
      {title: "性别", field: "gender",align: 'center'},
      {title: "手机号", field: "phone",align: 'center'},
      {title: "学院", field: "college",width: 200,align:'center'},
      {title: "专业", field: "major",width: 150,align: 'center'},
      {title: "年级", field: "grade",align: 'center'},
      {title: "班级", field: "classNo",align: 'center'},
      {title: "贷款原因", field: "reasons",align: 'center'},
      {title: "贫困类型", field: "type",align: 'center',templet:function (e) {
          if(e.type == 1){
            return "因病致贫";
          }else if(e.type == 2){
            return "因灾致贫";
          }else if(e.type == 3){
            return "低保";
          }else if(e.type == 4){
            return "农村低收入子女";
          }else if(e.type == 5){
            return "特困子女";
          }else if(e.type == 6){
            return "烈士子女";
          }else if(e.type == 7){
            return "少数民族家庭经济困难子女";
          }
        }},
      {title: "贷款金额", field: "amount",align: 'center'},
      {title: "贷款年限", field: "loanYears",align: 'center'},
      {title: "未还贷款", field: "owingAmount",align: 'center'},
      {title: "逾期状态", field: "overtime",align: 'center'},
    ]];

    const dataTable = table.render({
      elem: "#dataTable",
      height: "600px",
      toolbar: "#tableBar",
      id: "dataTable",
      page: {
        layout:['limit','count','prev','page','next','skip'],
        curr: 1,
        limit: 20
      },
      limit:[5,10,20,30,40,50],
      url: ctx + "loan/belief/getBeliefList",
      parseData: ({code, data, msg}) => {
        const {list, total} = data;
        return {
          "code": code,
          "msg": msg,
          "count": total,
          "data": list
        }
      },
      cols: cols
    });

    form.on("submit(searchBtn)", data => {
      dataTable.reload({
        where: data.field,
        page: {
          curr: 1
        }
      })
    })

    form.on("submit(resetBtn)", data => {
      form.val("searchForm", {
        username: "",
        idCard: "",
        major: "",
        grade: "",
        classNo: "",
        type: ""
      })
      $("#searchBtn").click();
    })
  });
</script>
</body>
</html>